<script setup>
import { Timer } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useGameStore } from '@/stores/index'

const gameStore = useGameStore()
const tableGameData = ref([])
const start = async () => {
  await gameStore.getGamelist()
  // 将 gameStore.game 中的 sfqy 值转换为布尔值，并赋值给 tableGameData
  /*   tableGameData.value = gameStore.game.map((game) => {
    return { ...game, sfqy: game.sfqy === 1 ? true : false }
  }) */
  tableGameData.value = gameStore.game
}

start()

const log = async (row) => {
  /*   const gameData = tableGameData.value[index]
  console.log(gameData)
  console.log(gameData.sfqy) */
  /* gameData.sfqy = gameData.sfqy === '1' ? '0' : '1'
  console.log(gameData.sfqy) */

  await gameStore.updateGameStatus(row)
  start()
}
</script>
<template>
  <div class="top">
    <div class="input">
      <!-- 保存按钮 -->
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
  <el-table :data="tableGameData" style="width: 100%">
    <el-table-column label="发布日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.release_date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="game_name" label="游戏名字" width="auto" />
    <el-table-column label="分类" width="100">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>分类: {{ scope.row.category }}</div>
            <div>价格: {{ scope.row.price }}元</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.category }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >驳回</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="首页显示" width="180">
      <template #default="scope">
        <el-switch
          v-model="scope.row.sfqy"
          class="mb-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(211, 227, 253);--"
          active-text="开启"
          inactive-text="关闭"
          active-value="1"
          inactive-value="0"
          @change="log(scope.row)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped lang="scss">
.top {
  display: flex;
  justify-content: flex-end;
}
</style>
